<template>
  <el-card class="page-tools">
    <div style="display:flex;">
      <div style="flex:1">
        <div v-if="$slots.before" class="before">
          <!-- 判断当前组件实例的$slots中是否包含before插槽来控制是否显示该div -->
          <i class="el-icon-info"/>
          <slot name="before" />
        </div>
      </div>
      <div>
          <slot name="after" />
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name:'PageTools',
  created(){
    console.log(this.$slots);
    // $slots里面存储了关于调用本组件使用的插槽信息，格式为{插槽名1：插槽内容，插槽名2：插槽内容}
  }   
}
</script>

<style lang='scss'>
 .page-tools {
    margin: 10px 0;
    .before {
      line-height: 34px;
    i {
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
 }
</style>